<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>芝麻分数</span>
      <div class="button-container">
        <el-button v-for="(button, index) in buttons" :key="index" style="padding: 3px 0" type="text"
          @click="handleButtonClick(index)">
          {{ button }}
        </el-button>
      </div>
    </div>

    <div v-if="dataList.length > 0">
      <ul>
        <li v-for="(item, index) in dataList" :key="index" class="data-item">
          <div class="data-info">
            <span class="data-name">{{ item.name }}</span>
            <span class="data-number">{{ item.number }}</span>
          </div>
          <el-progress :percentage="calculatePercentage(item)" class="progress-bar"></el-progress>
        </li>
      </ul>
    </div>
    <div v-else>
      数据加载中...
    </div>
  </el-card>
</template>

<style>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,

.box-card {
  width: 360px;
}

.data-name {
  font-weight: bold;
  margin-right: 20px; 
}

.data-number {
  color: #007bff;
}

.button-container {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.data-item {
  margin-bottom: 20px; /* 增加数据项之间的间距 */
  font-size: 16px;
  color: #333;
  display: flex;
  flex-direction: column; /* 垂直排列数据项内容 */
  align-items: center; /* 居中对齐数据项内容 */
}

.data-info {
  display: flex;
  align-items: center;
  margin-bottom: 10px; /* 增加数据名称和数据数值之间的间距 */
}

.data-name {
  font-weight: bold;
  margin-right: 10px;
}

.data-number {
  color: #007bff;
}

.progress-bar {
  width: 100px;
}
</style>

<script>
import { listZhiMa } from "@/api/index/index";
export default {
  data() {
    return {
      buttons: ['今天', '昨天', '近三天', '近五天'],
      selectedIndex: 0,
      dataList: [], // 用于存储接口返回的数据
    };
  },
  methods: {
    handleButtonClick(index) {
      switch (index) {
        case 0:
          this.handleType(0); // 今天
          break;
        case 1:
          this.handleType(1); // 昨天
          break;
        case 2:
          this.handleType(2); // 近三天
          break;
        case 3:
          this.handleType(3); // 近五天
          break;
        default:
          break;
      }
      this.selectedIndex = index;
    },
    handleType(type) {
      listZhiMa(type)
        .then((response) => {
          if (response.data && response.data.dataList) {
            this.dataList = response.data.dataList;
          }
        })
        .catch((error) => {
          console.error('请求失败', error);
        });
    },
    calculatePercentage(item) {
      // 计算进度条的百分比，以全国的数据为基准
      const total = this.dataList.find((data) => data.name === '全国').number;
      return (item.number / total) * 100;
    },
  },
  mounted() {
    // 页面加载时默认加载今天的数据
    this.handleButtonClick(0);
  },
};
</script>
